<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/echars.mini.js"></script>
    <script src="../static/echars_dev/candlestick.js"></script>
    <script src="../static/config.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
    body {
        display: block;
        margin: 8px;
        width: 100%;
        height: 100%;
    }
    ul li {
        list-style: none;
        width: 200px;
    }
    #leftTree{
        float: left;
        left: 0;
        height: 100%;
        width: 200px;
    }
    .gpButtonClass{
        width: 130px;
    }
</style>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div>
        <input type="text" id="code" value="sz002095" />
        <button onclick="queryData()" type="button" >查询</button>
        <button onclick="getShDataAll()" type="button" >上海证券列表</button>
        <button onclick="getSzDataAll()" type="button" >深圳证券列表</button>
        <button onclick="getMeDataAll()" type="button" >自选列表</button>
    </div>
<div id="leftTree">

    <ul id="gupiaoli" onclick="handleButton" >
    </ul>
</div>
<div id="main" style="width: 70%;height:900px;float: left;left: 200px"></div>
<div style="position: relative; right: 0;top: 0">
   <button type="button" onclick="WebSocketTest()">
    数据查询
   </button>
    <div id="myModal">

</div>
</div>
<script type="text/javascript">

     function WebSocketTest() {
        if ("WebSocket" in window) {
           // 打开一个 web socket
           var ws = new WebSocket("ws://localhost:5678");

           // 连接建立后的回调函数
           ws.onopen = function() {
           // Web Socket 已连接上，使用 send() 方法发送数据
              ws.send("admin:123456:sz000001");
               console.log("正在发送：admin:123456");
           };
           // 接收到服务器消息后的回调函数
           ws.onmessage = function (evt) {
                console.log("收到消息："+evt);
                $('#myModal').append(evt+'</br>')
           };
           // 连接关闭后的回调函数
           ws.onclose = function() {
              // 关闭 websocket
               console.log("连接已关闭...");
           };
           ws.onerror = function () {
            console.log('链接发生错误');

            }
        } else {
           // 浏览器不支持 WebSocket
            console.log("您的浏览器不支持 WebSocket!");
        }
     }

     // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var dataList = []
     function getShDataAll() {
         $.get(config.serviceURl+"/getsh" , function (data, status) {
            dataList = data.data
             $("#gupiaoli").empty();
              $("#gupiaoli").append('<li>上证列表</li>')
             for (let i = 0; i < dataList.length; i++) {
                 let dataListElement = dataList[i];
                   $("#gupiaoli").append(liHtml(dataListElement))
             }
         });
     }

       function getSzDataAll() {
         $.get(config.serviceURl+"/getsz" , function (data, status) {
            dataList = data.data
             $("#gupiaoli").empty();
              $("#gupiaoli").append('<li>深证列表</li>')
             for (let i = 0; i < dataList.length; i++) {
                 let dataListElement = dataList[i];
                   $("#gupiaoli").append(liHtml(dataListElement))
             }

         });
     }
      function getMeDataAll() {
         $.get(config.serviceURl+"/getMe" , function (data, status) {
            dataList = data.data
            $("#gupiaoli").empty();
              $("#gupiaoli").append('<li>自选</li>')
             for (let i = 0; i < dataList.length; i++) {
                 let dataListElement = dataList[i];
                   $("#gupiaoli").append(liHtml2(dataListElement))
             }

         });
     }
        function liHtml(dataListElement) {
            return '<li><button type="button" class="gpButtonClass" onclick="handleButton(this)" value="'+dataListElement.symbol+'">'+dataListElement.name+'('+dataListElement.code+')</button><a href="#" onclick=" saveMe('+dataListElement.id+')"><img src="../static/image/jiahao.jpg" height="20"/></a></li>'
        } function liHtml2(dataListElement) {
            return '<li><button type="button" class="gpButtonClass" onclick="handleButton(this)" value="'+dataListElement.symbol+'">'+dataListElement.name+'('+dataListElement.code+')</button><a href="#" onclick=" deleteMe('+dataListElement.id+')"><img src="../static/image/jianhao.jpg" height="20"/></a></li>'
        }
       function saveMe(hsId) {
         $.get(config.serviceURl+"/saveMe/"+hsId , function (data, status) {
            if(data.data){
                alert("添加成功"+status)
            }

         });
     }
      function deleteMe(hsId) {
         $.get(config.serviceURl+"/delete/"+hsId , function (data, status) {
            if(data.data){
                alert("删除成功"+status)
                getMeDataAll()
            }

         });
     }
     function handleButton(param) {
        console.log("点击",param.value)
         $("#code").val(param.value)
         queryData(param.value)
     }
    function queryData(param) {
         param = $("#code").val()
        console.log(param,"param111")
        $.get(config.serviceURl+"/getgplist/"+param, function (data, status) {
            data0 = splitData(data.data)
            console.log(data0)
            show(data,data0,myChart)
            // 使用刚指定的配置项和数据显示图表。
        });
    }
    function splitData(rawData) {
        var categoryData = [];
        var values = [];
        var volume = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
            volume.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
        }
        return {
            categoryData: categoryData,
            values: values,
            volume: volume
        };
    }



</script>
</body>
</html>